<template>
  <div class="booksNew">
    <h1>新书上市</h1>
    <div class="book" v-for="book in books" :key="book.id">
      <figure>
        <router-link :to="'/book/' + book.id">
          <!-- <img :src="bookImg[book.id - 1]" /> -->
          <img :src="book.imgUrl" alt="我是图片" />
          <figcaption>
            {{ book.title }}
          </figcaption>
        </router-link>
      </figure>
      <p>
        {{ currency(factPrice(book.price, book.discount)) }}
        <span>{{ currency(book.price) }}</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import { getNewBooks } from '@/api/api'
const currency: any = inject('currency')
const factPrice: any = inject('factPrice')
interface InewBook {
  author: string
  bigImgUrl: string
  bookConcern: null
  brief: null
  discount: number
  id: number
  imgUrl: string
  inventory: number
  price: number
  publishDate: null
  title: string
}
// const bookImg = [
//   'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSytjz6QU4yP9TxggeYBPj7X-8GEgJ1aB45Bg&usqp=CAU',
//   'https://img0.baidu.com/it/u=171634324,1517516669&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400',
//   'https://img2.baidu.com/it/u=3568533297,4086559776&fm=253&fmt=auto?w=635&h=500',
//   'http://t14.baidu.com/it/u=444068582,3249212108&fm=224&app=112&f=JPEG?w=500&h=500',
//   'http://t14.baidu.com/it/u=241860447,3318878220&fm=224&app=112&f=JPEG?w=500&h=500',
//   'http://t13.baidu.com/it/u=3674761671,2022206957&fm=224&app=112&f=JPEG?w=500&h=500',
//   'https://img0.baidu.com/it/u=1715381235,3334173073&fm=253&fmt=auto&app=138&f=JPEG?w=757&h=500',
//   'https://img1.baidu.com/it/u=1502139619,1818604180&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
// ]
const books = ref<InewBook[]>([])
const getNewBook = async () => {
  const { data } = await getNewBooks()
  console.log(data)
  books.value = data
}
getNewBook()
</script>

<style scoped>
.booksNew {
  width: 100%;
  margin: 0 auto;
}
.booksNew .book {
  display: inline-block;
  width: 15%;
  border-right: solid 1px #ccc;
  margin-left: 10px;
}
.booksNew a:hover {
  color: red;
}
.booksNew img {
  width: 120px;
  height: 100px;
}
.booksNew span {
  color: #cdcdcd;
  text-decoration: line-through;
}
</style>
